<template>
  <div class="app-container">
    <el-row :gutter="20" class="mt-left">
      <el-col :span="7" class="top">

        <!--<div class="clearfix">-->
        <!--<el-input-->
        <!--placeholder="输入关键字进行过滤"-->
        <!--size="mini" style="margin-bottom: 10px"-->
        <!--v-model="filterText" clearable>-->
        <!--</el-input>-->

        <!--&lt;!&ndash;<el-button size="mini" style="float: right;"&ndash;&gt;-->
        <!--&lt;!&ndash;@click.stop="showAddDirectoryDialog()">添加顶级分类&ndash;&gt;-->
        <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
        <!--</div>-->

        <directory @handleClickNode="handleClickNode" />

      </el-col>

      <el-col :span="1" style="visibility: hidden">1</el-col>
      <el-col :span="16" class="top">
        <div style="margin-right: 60px">
          <span v-if="selected_directory">当前选择目录: {{ selected_directory__name }}
            <el-button size="mini" @click="() => selected_directory = null">取消指定目录</el-button>
          </span>

          <div class="head">
            添加人：
            <el-select
              v-model="owner_id"
              v-loading="ownersLoading"
              placeholder="添加人"
              filterable
              size="mini"
              clearable
            >
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.username"
                :value="user.id"
              />
            </el-select>
          </div>

          <el-input
            v-model="kw"
            placeholder="请输入内容"
            style="width: 100%;margin:10px 0;"
            clearable
            size="mini"
            @keyup.native.enter="getList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getList" />
          </el-input>
        </div>

        <el-row v-loading="listLoading">
          <el-col v-for="(item, index) in images" :key="item.id" :span="5" :offset="index % 4 ? 1 : 0">
            <el-card>
              <span slot="header" :title="item.directory__name || '未分类'" class="mt-row-title">
                {{ item.directory__name || '未分类' }}</span>
              <el-image class="image" :src="item.url" fit="cover" :preview-src-list="[item.url]" style="width: 200px; height: 200px;" />
              <div style="padding: 4px;">
                <div>
                  <span title="添加人">{{ item.owner__username }}</span>
                  <span style="margin: 0 5px">|</span>
                  <span title="使用次数">{{ item.used_time }}</span>
                </div>
                <div class="clearfix">
                  <time class="time" title="最新状态更新于">{{ item.update_at }}</time>
                  <div class="mt-bottom mt-no-selected">
                    <span title="谷歌搜图" @click="handleClickGoogle(item.url)">
                      <svg-icon icon-class="google" style="margin-right: 5px;color:#ea4335" />
                    </span>
                    <i
                      class="el-icon-edit"
                      title="修改目录"
                      style="color: #409EFF;margin-right: 5px;"
                      @click="handleClickEdit(item)"
                    />
                    <i
                      v-if="item.deleteable"
                      class="el-icon-delete"
                      title="删除"
                      style="color: #F56C6C;margin-right: 5px;"
                      @click="handleClickDelete(item)"
                    />
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

        <el-pagination
          v-if="images.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[20,40,80,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-col>
    </el-row>

    <el-dialog
      v-loading.fullscrenn.lock="editDialogLoading"
      title="修改图片目录"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      style="margin-top: 148px !important;"
    >

      <directory
        :editable="false"
        @handleClickNode="handleClickChangeDirectory"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">
          取 消</el-button>
        <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import directory from '@/views/cms/elements/directory'
import {
  Get as GetImages,
  // Post as AddImage,
  Put as EditImage,
  Delete as DeleteImage
} from '@/api/cms/image'
import { Get as GetUsers } from '@/api/users'

const qs = require('qs')

export default {
  components: { directory },
  data() {
    return {
      filterText: null,
      selected_directory: null,
      selected_directory__name: null,

      users: [],
      owner_id: null,
      ownersLoading: false,

      kw: null,
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 20,
      page: 1,
      total: 0,

      listLoading: false,
      images: [],

      editDialogVisible: false,
      editDialogLoading: false,
      temp: {
        id: null,
        directory_id: null
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.mtTree.filter(val)
    }
  },
  created() {
    this.handleFetchGetUsers()
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      GetImages(null, qs.stringify({
        kw: this.kwInput,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc,
        directory_id: this.selected_directory,
        owner_id: this.owner_id
      }))
        .then(response => {
          this.images = response.data.data
          this.total = response.data.total
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
    },
    handleClickGoogle(v) {
      window.open(`https://www.google.com/searchbyimage?image_url=${v}`)
    },
    handleClickEdit(item) {
      this.editDialogVisible = true
      this.temp.id = item.id
      this.temp.directory_id = [item.directory_id || -1]
    },
    handleClickDelete(item) {
      this.$confirm(`确认要删除该图片?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        DeleteImage(item.id)
          .then(response => {
            this.getList()
          })
          .catch(() => {
            this.listLoading = false
          })
      }).catch(() => {
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleFetchGetUsers() {
      this.ownersLoading = true
      GetUsers()
        .then(response => {
          this.ownersLoading = false
          this.users = response.data.data
        })
        .catch(e => {
          this.ownersLoading = false
        })
    },
    handleEditConfirm() {
      this.editDialogLoading = true
      EditImage(this.temp.id,
        JSON.stringify({ directory_id: this.temp.directory_id[0] })
      ).then(response => {
        this.editDialogLoading = false
        this.editDialogVisible = false
        this.getList()
      }).catch(e => {
        this.editDialogLoading = false
      })
    },
    handleClickNode(data) {
      if (data.id !== -1) {
        this.selected_directory = data.id
        this.selected_directory__name = data.name
      }
    },
    handleClickChangeDirectory(data) {
      console.log(data)
      this.temp.directory_id = [data.id]
    }
  }
}
</script>

<style scoped>
  .head {
    float: right;
    width: 260px;
    vertical-align: middle;
  }

  .top {
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 28px;
    background-color: white;
  }

  .vue-select-image >>> .vue-select-image__thumbnail {
    text-align: center;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 5px;
    line-height: 12px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .app-container >>> .el-card {
    margin: 5px;
  }

  .app-container >>> .el-card:first-child {
    margin-left: 0;
  }

  .mt-bottom {
    display: inline-block;
    float: right;
    padding: 0;
  }

  .mt-no-selected {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .mt-pagination {
    float: right;
    margin-right: 10px;
  }

  i:hover, .svg-icon:hover {
    cursor: pointer;
  }

  .mt-left {
    padding: 20px;
    background: rgba(246, 246, 246, 0.9);
  }

  .app-container >>> .el-card__body {
    padding-bottom: 5px;
  }

  .app-container >>> .el-card__header {
    padding: 5px 5px 5px 15px;
  }

  .mt-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display:inline-block;
    vertical-align: middle;
  }
</style>
